<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目需求内容变更</title>
  <style>
    body { background: #f0f2f5; margin: 0; font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; }
    .pg3-container { display: flex; background: #fff; min-height: 600px; margin: 32px auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); width: 1200px; }
    .pg3-process { width: 240px; background: #f5f5f5; border-right: 1px solid #f0f0f0; padding: 24px 0; border-radius: 8px 0 0 8px; display: flex; flex-direction: column; }
    .pg3-process h3 { margin: 0 0 24px 24px; font-size: 16px; color: #333; font-weight: 500; }
    .pg3-process-link { color: #1890ff; font-size: 14px; text-decoration: underline; float: right; margin-right: 24px; }
    .pg3-process-item { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 24px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .pg3-process-item img { width: 32px; height: 32px; border-radius: 50%; background: #1890ff; }
    .pg3-process-item span { color: #666; font-size: 14px; }
    .pg3-content { flex: 1; padding: 32px 32px 24px 32px; }
    .pg3-content h1 { font-size: 20px; color: #222; font-weight: 600; margin: 0 0 24px 0; }
    .pg3-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); padding: 24px; margin-bottom: 24px; }
    .pg3-card h2 { font-size: 16px; color: #333; font-weight: 500; margin-bottom: 16px; }
    .pg3-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .pg3-form-grid label { display: block; color: #666; font-size: 14px; margin-bottom: 4px; width: 120px; float: left; }
    .pg3-form-grid input { width: calc(100% - 130px); padding: 8px; border: 1px solid #e6e6e6; border-radius: 4px; background: #f5f5f5; color: #222; }
    .pg3-form-grid .full { grid-column: span 2; }
    .pg3-upload { padding: 16px; background: #f5f5f5; border-radius: 4px; color: #999; }
    .pg3-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px; }
    .pg3-actions button { min-width: 72px; padding: 8px 24px; border-radius: 4px; border: 1px solid #d9d9d9; background: #fff; color: #222; cursor: pointer; }
    .pg3-actions .danger { color: #ff4d4f; border-color: #ff4d4f; background: #fff; }
    .pg3-actions .primary { color: #fff; background: #1890ff; border-color: #1890ff; }
  </style>
</head>
<body>
  <div class="pg3-container">
    <div class="pg3-process">
      <h3>审批进程 <a class="pg3-process-link" href="#">查看完整流程图</a></h3>
      <div class="pg3-process-item">
        <img src="user-icon.png" alt="用户头像" />
        <span>发起审批</span>
      </div>
      <div class="pg3-process-item">
        <img src="user-icon.png" alt="用户头像" />
        <span>项目负责人审批</span>
      </div>
    </div>
    <div class="pg3-content">
      <h1>项目需求内容变更</h1>
      <div class="pg3-card">
        <h2>特性信息</h2>
        <div class="pg3-form-grid">
          <div><label>特性名称</label><input type="text" value="东方国际" disabled /></div>
          <div><label>特性编号</label><input type="text" value="IT990946-F8268695589" disabled /></div>
          <div><label>所属专题</label><input type="text" value="专题特性送审测试" disabled /></div>
          <div><label>所属专题编号</label><input type="text" value="IT990946-E153" disabled /></div>
          <div class="full"><label>特性负责人</label><input type="text" value="伍留/80293464" disabled /></div>
        </div>
      </div>
      <div class="pg3-card">
        <h2>变更说明</h2>
        <div class="pg3-form-grid">
          <div><label>变更原因</label><input type="text" value="其他" disabled /></div>
          <div class="full"><label>变更说明</label><input type="text" value="1212" disabled /></div>
          <div class="full"><label>变更文档</label><div class="pg3-upload">无</div></div>
        </div>
      </div>
      <div class="pg3-actions">
        <button>关闭</button>
        <button>保存</button>
        <button class="danger">拒绝</button>
        <button class="primary">同意</button>
      </div>
    </div>
  </div>
</body>
</html> 